<template>
	<div class="bookDetailPage">
		<HeaderTab>
			<div slot="left">
				<div class="glyphicon glyphicon-menu-left return_but" @click="backClick"></div>
			</div>
			<div slot="center" class="header_center">
				书籍详情页
			</div>
		</HeaderTab>
		<div class="cover_pic">
			<img :src="book_itemsdata.book_cover">
		</div>
		<div class="DetailPage_text">
			<h1 class="DetailPage_title">{{book_itemsdata.book_name}}</h1>
			<p class="DetailPage_author">作者：<a href="javascript:;">{{book_itemsdata.author}}</a></p>
			<p class="DetailPage_tag">标签：
				<a href="javascript:;" v-for="(i,index) in book_tag" :key="index">{{i.tag_name}}</a>
			</p>
			<p class="DetailPage_chapter_num">章节：共<a href="javascript:;">{{chapter_num}}</a>章</p>
			<p class="DetailPage_numb">编号：<span>SJXY-{{book_itemsdata.id}}</span></p>
			<div class="DetailPage_box">
				<ul>
					<li>
						<button class="btn btn-success DetailPage_readbut" @click="startReadClick()">开始阅读</button>
					</li>
					<li>
						<span id="DetailPage_Collectionbut" class="glyphicon glyphicon-star-empty DetailPage_Collectionbut_start"></span>
					</li>
				</ul>
			</div>
		</div>
		<div id="DetailPage_briefIntroduction">
			<div class="briefIntroduction">
				作品简介
			</div>
			<p class="briefIntroduction_text">
				1944年9月16日，陈梦家先生携夫人赵萝蕤女士登上了从昆明飞往加尔各答的客机，开始了长达两个月的赴美旅程。陈梦家本是清华大学（抗战时期在昆明并入西南联大）古文字学、历史学及古文献学副教授，赵萝蕤则时任云南大学英国文学专业讲师。他们从中日战争中地处偏远的学术避难所出发，前往芝加哥大学。洛克菲勒基金会为陈梦家提供学术资助，陈梦家与赵萝蕤需在芝加哥大学的东方语言文学系担任研究人员。对陈氏夫妇的邀请展现了基金会和大学高层令人钦佩的远见，他们认识到第二次世界大战凸显了美国需要了解东亚（尤其是中国）的紧迫性，而中国知识分子是信息和理解的重要资源。
			</p>
		</div>
		<div class="chapter_box">
			<div class="chapter_title">所有章节</div>
			<ul>
				<li v-for="(j,index) in chapter_data" :key="index" @click="readClick(j)">
					<a href="javascript:;">
						<span class="glyphicon glyphicon-book chapter_logo"></span>
						{{j.chapter_title}}
						<span class="glyphicon glyphicon-menu-right Arrow_style"></span>
					</a>
				</li>
			</ul>
		</div>
		<div class="all_comment">
			<div class="book_comment">
				<div class="book_comment_title">所有评论</div>
			</div>
			<div class="book_comment_box">
				<div class="book_comment_boxitems" v-for="(v,k) in comment_data" :key="k">
					<div class="comment_user_headportrait">
						<img class="headportrait_comment" src="~assets/img/Head_portrait/Headportrait.png" alt="">
					</div>
					<div class="comment_user_text">
						<p class="comment_user">{{v.comment_user}}</p>
						<p class="comment_time"><span class="glyphicon glyphicon-time"></span>发布时间：<span>{{v.updated_at}}</span></p>
						<p class="comment_content">{{v.comment_content}}</p>
					</div>
				</div>
				<div id="comment_null_text">
					暂无评论，来抢沙发
				</div>
			</div>
		</div>
		<div>
			<div class="book_Recommend">
				<div class="book_Recommend_title">相关类型</div>
			</div>
			<div class="book_Recommend_box">
				<bookItem v-for="(item, index) in relevant_books" :key="index" :book_items="item"></bookItem>
			</div>
		</div>
		<div class="null_box"></div>
		<TabBar class="button_box">
			<div class="input-group book_Recommend_butbox">
				<input id="com_text" type="text" class="form-control" placeholder="请输入你的神评...">
				<span class="input-group-btn">
					<button class="btn btn-info release_but" type="button" @click="sendComment()">发布评论</button>
				</span>
			</div>
		</TabBar>
		<div class="mask" v-if="bol" @click="close">
			<div class="box" @click.stop="">
				<h1 class="glyphicon glyphicon-ok"></h1>
				<p class="mask_tip">{{mask_tip}}</p>
			</div>
		</div>
		<div class="merk" v-if="bel" @click="clese">
			<div class="bex" @click.stop="">
				<h1 class="glyphicon glyphicon-remove"></h1>
				<p class="merk_tip">{{merk_tip}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import HeaderTab from 'common/HeaderTab/HeaderTab';
	import bookItem from 'views/DetailsPage/bookItem'
	import TabBar from 'common/TabBar/TabBar';

	export default {
		name: 'bookDetailPage',
		components: {
			HeaderTab,
			TabBar,
			bookItem
		},
		methods: {
			// 小说简介栏动态效果
			show() {
				let box = document.getElementById("DetailPage_briefIntroduction");
				let text = box.innerHTML;

				let newBox = document.createElement("div");
				let btn = document.createElement("a");
				btn.className = 'add_style';
				newBox.innerHTML = text.substring(0, 200);
				btn.innerHTML = text.length > 200 ? "﹀" : "";

				btn.onclick = function() {
					if (btn.innerHTML == "﹀") {
						btn.innerHTML = "︿";
						newBox.innerHTML = text;
					} else {
						btn.innerHTML = "﹀";
						newBox.innerHTML = text.substring(0, 200);
					}
				}

				box.innerHTML = "";
				box.appendChild(newBox);
				box.appendChild(btn);
			},

			// 收藏按钮点击效果
			aaclick() {
				let _self = this; //解决methods里方法调用方法的this指向问题
				$('#DetailPage_Collectionbut').click(function() {
					if ($(this).hasClass('glyphicon-star-empty')) {
						// 点击收藏
						$(this).removeClass('glyphicon-star-empty');
						$(this).addClass('glyphicon-star');
						_self.axios.get('http://192.168.43.169/api/collection_click', {
							params: {
								userID: _self.userID,
								bookID: _self.$route.params.id,
								ubID: _self.userID + _self.$route.params.id, //唯一键
							},
						}).then((response) => {
							if (response.status == 200) {
								console.log(response.data);
							}
						});
					} else if ($(this).hasClass('glyphicon-star')) {
						// 取消收藏
						$(this).removeClass('glyphicon-star');
						$(this).addClass('glyphicon-star-empty');
						_self.axios.get('http://192.168.43.169/api/collection_del', {
							params: {
								userID: _self.userID,
								bookID: _self.$route.params.id,
								ubID: _self.userID + _self.$route.params.id, //唯一键
							},
						}).then((response) => {
							if (response.status == 200) {
								console.log(response.data);
							}
						});
					}
				})
			},

			// 点击导航栏返回按钮返回上一个组件的效果实现
			backClick() {
				this.$router.back();
				// this.$router.go(-1); //效果也一样
			},

			// 开始阅读按钮点击效果实现,把该章节的id获取并传递到阅读页面
			startReadClick() {
				this.$router.push('/bookReadPage/' + this.chapter_data[0].id)
			},

			// 阅读条目点击效果
			readClick(e) {
				this.$router.push('/bookReadPage/' + e.id)
			},

			// 遍历标签组,逐一发送axios请求
			relevantBookItems() {
				// 由标签id获取相关类型书本
				for (let i = 0; i < this.book_tag.length; i++) {
					this.axios.get('http://192.168.43.169/api/book/' + this.book_tag[i].id).then((response) => {
						this.relevant_books = response.data.data
					});
				}
			},

			loadBookItemData() {
				// 由书本id获取该书基本信息
				let book_id = this.$route.params.id;
				this.axios.get('http://192.168.43.169/api/bookitem/' + book_id).then((response) => {
					let resdata = response.data;
					if (resdata.code == 200) {
						this.book_itemsdata = resdata.data[0]
					}
				});
			},

			loadBookChapterData() {
				// 由书本id获取章节数
				// 获取上一个组件跳转过来时携带的query参数id($route是当前活动路由)
				let book_id = this.$route.params.id;
				this.axios.get('http://192.168.43.169/api/chapter/' + book_id).then((response) => {
					let chapters_data = response.data.data;
					this.chapter_data = chapters_data
					this.chapter_num = chapters_data.length
				});
			},

			loadBookTagData() {
				// 由书本id获取tag标签
				// 获取上一个组件跳转过来时携带的query参数id($route是当前活动路由)
				let book_id = this.$route.params.id;
				this.axios.get('http://192.168.43.169/api/tag/' + book_id).then((response) => {
					let resdata = response.data;
					if (resdata.code == 200) {
						this.book_tag = resdata.data
						this.relevantBookItems();
					}
				});
			},

			// 判断是否有评论,无评论则显示抢占评论模块
			loadBookComment() {
				this.axios.get('http://192.168.43.169/api/comment/' + this.$route.params.id).then((response) => {
					if (response.data.code == 200) {
						if (response.data.data.length) {
							let commetStr = response.data.data
							for (let i = 0; i < commetStr.length; i++) {
								let commet_arr = {comment_user: '',comment_content: '',updated_at: ''};
								commet_arr.comment_user = commetStr[i].comment_user;
								commet_arr.comment_content = commetStr[i].comment_content;
								let time = commetStr[i].updated_at
								let m = time.split(' ');
								commet_arr.updated_at = m[0];
								
								this.comment_data.push(commet_arr)
							}
							console.log(this.comment_data)
						} else {
							document.getElementById("comment_null_text").style.display = "block";
						}
					}
				});
			},

			// 评论发送按钮
			sendComment() {
				let text = $('#com_text').val();
				if (text) {
					this.axios.get('http://192.168.43.169/api/comment_preservation', {
						params: {
							comment_user: this.userName,
							comment_content: text,
							book_id: this.$route.params.id, //唯一键
						},
					}).then((response) => {
						let _self = this;
						_self.mask_tip = response.data;
						_self.bol = true;
						$('#com_text').val(""); //评论发布成功后，清空输入框
						// 设置一定时间后关闭提醒框
						if (_self.bol) {
							setTimeout(function() {
								_self.bol = false;
								_self.$router.go(0); //设置页面自动刷新
							}, 2000);
						}
					});
				} else {
					let _self = this
					_self.bel = true
					_self.merk_tip = "评论内容不能为空"
					// 设置一定时间后关闭提醒框
					if (_self.bel) {
						setTimeout(function() {
							_self.bel = false
						}, 2000);
					}
				}

			},

			// 模态框关闭事件
			close() {
				this.bol = !this.bol;
			},

			// 模态框关闭事件
			clese() {
				this.bel = !this.bel;
			}
		},
		mounted() {
			this.show();
			this.aaclick();
		},
		data() {
			return {
				id: null,
				book_itemsdata: [],
				tag_arr: [],
				chapter_data: [],
				chapter_num: null,
				items: [],
				book_tag: [],
				relevant_books: [],
				userID: this.$store.state.userid,
				userName: '',
				ubID: null,
				comment_data: [],
				bol: false,
				mask_tip: "",
				bel: false,
				merk_tip: ""
			}
		},
		created() {
			this.loadBookItemData();
			this.loadBookChapterData();
			this.loadBookTagData();
			this.loadBookComment();

			// 获取用户姓名
			this.axios.get('http://192.168.43.169/api/userquery/' + this.userID).then((response) => {
				this.userName = response.data.data[0].username;
			});

			// 加载页面后,判断该书是否已被收藏
			this.axios.get('http://192.168.43.169/api/collection_check', {
				params: {
					userID: this.userID,
					bookID: this.$route.params.id,
					ubID: this.userID + this.$route.params.id, //唯一键
				},
			}).then((response) => {
				if (response.data.length) {
					$('#DetailPage_Collectionbut').removeClass('glyphicon-star-empty');
					$('#DetailPage_Collectionbut').addClass('glyphicon-star');
				} else {
					console.log('该书你没有收藏！！')
				}
			});
		},
		watch: {
			// 监听,当路由地址发生改变时,再重新执行一次loadData()函数
			'$route'(to, from) {
				this.loadBookItemData();
				this.loadBookChapterData();
				this.loadBookTagData();

				document.body.scrollTop = document.documentElement.scrollTop = 0;
			}
		}
	}
</script>

<style>
	@import '~assets/css/bookDetailPage.css';
	@import '~assets/css/mask.css';
</style>
